<template>
  <div class="mb-8">
    <n-space class="flex flex-wrap justify-center gap-3">
      <n-button
        v-for="category in categories"
        :key="category.id"
        :type="activeCategory === category.id ? 'primary' : 'default'"
        :ghost="activeCategory !== category.id"
        size="large"
        round
        class="category-button"
        @click="setActiveCategory(category.id)"
      >
        {{ category.name }}
      </n-button>
    </n-space>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { NButton, NSpace } from 'naive-ui'
import { categories } from '@/data/config'
import { useAppStore } from '@/stores/useAppStore'

const appStore = useAppStore()

const activeCategory = computed(() => appStore.activeCategory)

const setActiveCategory = (categoryId: string) => {
  appStore.setActiveCategory(categoryId)
}
</script>

<style scoped>
.category-button {
  min-width: 100px;
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

.category-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
</style>